<template>
  <!-- Title -->
  <div>
    <TitleCompound :title="title" :description="description" />

  </div>

  <!-- content -->
  <div>
    <el-row class="tac">
      <!-- menu -->
      <el-col :span="5">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
          <el-radio-button :value="false">expand</el-radio-button>
          <el-radio-button :value="true">collapse</el-radio-button>
        </el-radio-group>
        <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
          @close="handleClose">
          <el-sub-menu v-for="category, idx in newsTypeList" :index="'' + idx" :key="category.id">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>{{ category.type }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item v-for="news, idx in newsStore.getNews(category.type)" :key="news.id" :index="'' + idx">
                <RouterLink :to="{
                  name: 'router-summaryprops-detail',
                  params: {
                    id: news.id
                  },

                }">{{ news.title }}</RouterLink>
                <!-- <RouterLink :to="{
                  path: '/router-summary/detail?id=Oriat_QEfJDRPUmMQNW_3',
                  // name: 'router-detail',
                  // props: true,
                  // query: {
                  //   id: news.id
                  // }
                }">{{ news.title }}</RouterLink> -->
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-col>
      <!-- detail -->
      <el-col :span="18">
        <RouterView></RouterView>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {

  Location,
} from '@element-plus/icons-vue'
import TitleCompound from '@/components/TitleCompound.vue'
import { useNewsStore } from '@/stores/News'

const title = 'Router Summary- Props'
const description = `使用props/params 传参<br>
 1. <b>router/index.ts</b>需要添加<br>
 <code>
{<br>
  path: '/router-summaryprops',<br>
    name: 'router-summaryprops',<br>
      component: () => import('../views/router/SummaryPropsView.vue'),<br>
        children: [<br>
          {<br>
            <p class='highlight'>path: 'detail/:id',</p>
            name: 'router-summaryprops-detail',<br>
            component: () => import('../views/router/DetailPropsView.vue'),<br>
            <p class='highlight'>props: true</p>
          },<br>
        ],<br>
    },<br>
</code>

2. 在<b>RouterLink</b>需要添加<b>params</b>信息<br>
<code>
   &ltRouterLink :to="{<br>
                   <span class='highlight'>name: 'router-summaryprops-detail',</span><br>
                  params: {<br>
                   <span class='highlight'> id: news.id</span><br>
                  },<br>
                }"&gt <br>
                {{ news.title }}<br>
  &ltRouterLink&gt<br>
</code>
`


const isCollapse = ref(false)
// const menuSpanSize = ref(3)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  // menuSpanSize.value = 5
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  // menuSpanSize.value = 3
}

const newsStore = useNewsStore()

const newsTypeList = newsStore.newsType

</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.highlight {
  color: red;
  font-weight: bold;
}
</style>
